<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:star="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>用户评价</title>
  <link rel="stylesheet" href="/static/member/css/index.css">
  <link rel="stylesheet" type="text/css" href="/static/item/scss/shop.css"/>
  <link rel="stylesheet" type="text/css" href="/static/item/scss/jd.css"/>
  <link rel="stylesheet" href="/static/item/scss/header.css"/>
  <link rel="stylesheet" type="text/css" href="/static/item/bootstrap/css/bootstrap.css"/>
  <style media="screen">
    * {
      font-family: "微软雅黑";
    }
    .evaluate_main{
      background: #fff;
      padding: 14.5px 19px;
      width: 1192px;
      margin: 0 auto;
      padding-bottom: 28px;
      margin-bottom: 20px;
    }

    .evaluate_title{
      font-size: 18px;
      color: #1E1E1E;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 12px;
    }

    .evaluate_title .line{
      width: 4px;
      height: 16px;
      background: #F5B937;
      margin-right: 6px;
    }


    .evaluateP_info{
      border: 1px solid rgba(231,231,231,1);
    }

    .evaluateP_info .info_tit{
      padding: 6px 8.5px;
      background: #F5F5F5;
      font-size: 7px;
    }


    .info_main{
      display: flex;
      justify-content: space-between;
    }

    .info_main .left {
      padding: 31.5px 55px;
      padding-top: 63px;
      flex-shrink: 0;
      border-right: 1px solid #E7E7E7;
    }


    .info_main .left .imgWrap{
      width: 282px;
      margin: 0 auto;
      margin-bottom: 15px;
      border: 1px solid #000;
    }

    .info_main .left .imgWrap img{
      height: 220px;
      width: 100%;
    }

    .info_main .left .description{
      color: #232323;
      font-weight: 400;
      font-size: 7px;
      margin-bottom: 22px;
      width: 341px;
      text-align: center;
      line-height: 22.79px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      /* 代表第几行进行超出部分省略的操作 */
      -webkit-line-clamp: 3;
      overflow: hidden;
    }

    .info_main .left .price{
      color: #E1251B;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 23px;
    }

    .info_main .left .price span:nth-child(1){
      font-size: 18px;
    }

    .info_main .left .price span:nth-child(2){
      font-size: 14px;
    }

    .info_main .left .specification{
      color: #9C9C9C;
      font-size: 14px;
      text-align: center;
    }



    .info_main .right{
      padding: 27px 35px;
      flex:1
    }

    .info_main .right .right_tit{
      font-size: 18px;
      color: #161616;
      font-weight: 400;
    }

    .info_main .right .evaluate_div{
      font-size: 14px;
      color: #727272;
      padding: 16px 0;
    }

    .info_main .right .evaluate_div div{
      margin: 8px 0;
      display: flex;
      align-items: center;
    }

    .info_main .right input:focus,
    .info_main .right textarea:focus,
    .info_main .right .form-control:focus{
      box-shadow: none;
      border-color: #ced4da;
    }

    .info_main .right textarea{
      background: #F4F4F4;
    }

    .info_main .right .imgList{
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      flex-wrap: wrap;
    }

    .info_main .right .imgList .imgWrap{
      display: inline-block;
      width: 85px;
      height: 80px;
      margin-right: 10px;
    }

    .info_main .right .imgList .imgWrap img{
      width: 100%;
      height: 100%;
    }

    .chooseFile{
      vertical-align: baseline;
      padding: 6px 10px;
      color: #F5B937;
      border: 1px solid #F5B937;
      display: inline-block;
      font-size: 12px;
      border-radius: 3px;
      cursor: pointer;
    }

    #imgHelp{
      font-size: 10px;
      color: #C6C6C6;
      margin-top: 13px;
    }

    .submit_evaluate{
      background:rgba(245,185,55,1);
      border-radius:4px;
      font-size:14px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color:rgba(255,255,255,1);
      display: inline-block;
      padding: 0px 20px;
      margin-top: 40px;
      margin-left: 110px;
      margin-bottom: 41px;
      cursor: pointer;
      line-height: 36px;
    }


    input::placeholder,
    select::placeholder,
    textarea::placeholder{
      font-size: 14px!important;
    }


    input,select,textarea{
      font-size: 14px!important;
      background: #F4F4F4!important;
      border:1px solid rgba(228,228,228,1)!important
    }



    /* 星级评分 */
    .shop-rating {
      height: 25px;
      overflow: hidden;
      zoom: 1;
      padding: 2px 0px;
      position: relative;
      z-index: 999;
    }

    .shop-rating span {
      height: 23px;
      display: block;
      line-height: 23px;
      float: left;
    }

    .shop-rating span.title {
      width: 125px;
      text-align: right;
      margin-right: 5px;
    }

    .shop-rating ul {
      float: left;
      margin: 0;
      padding: 0
    }

    .shop-rating .result {
      margin-left: 20px;
      padding-top: 2px;
    }

    .shop-rating .result span {
      color: #ff6d02;
    }

    .shop-rating .result em {
      color: #f60;
      font-family: arial;
      font-weight: bold;
    }

    .shop-rating .result strong {
      color: #666666;
      font-weight: normal;
    }

    .rating-level,
    .rating-level a {
      background: url(http://a.tbcdn.cn/app/rc/img/star_v2.png) no-repeat scroll 1000px 1000px;
    }

    .rating-level {
      background-position: 0px 0px;
      width: 80px;
      height: 23px;
      position: relative;
      z-index: 1000;
      margin-right: 10px;
    }

    .rating-level li {
      display: inline;
    }

    .rating-level a {
      line-height: 23px;
      height: 23px;
      position: absolute;
      top: 0px;
      left: 0px;
      text-indent: -999em;
      *zoom: 1;
      outline: none;
    }


    .rating-level a.one-star {
      width: 20%;
      z-index: 6;
    }

    .rating-level a.two-stars {
      width: 40%;
      z-index: 5;
    }

    .rating-level a.three-stars {
      width: 60%;
      z-index: 4;
    }

    .rating-level a.four-stars {
      width: 80%;
      z-index: 3;
    }

    .rating-level a.five-stars {
      width: 100%;
      z-index: 2;
    }

    .rating-level .current-rating,
    .rating-level a:hover {
      background-position: 0 -28px;
    }

    .rating-level a.one-star:hover,
    .rating-level a.two-stars:hover,
    .rating-level a.one-star.current-rating,
    .rating-level a.two-stars.current-rating {
      background-position: 0 -116px;
    }

    .rating-level .three-stars .current-rating,
    .rating-level .four-stars .current-rating,
    .rating-level .five-stars .current-rating {
      background-position: 0 -28px;
    }
    </style>
</head>

<body>

<div class="evaluate_main">
  <div class="evaluate_title">
    <div class="line"></div>
    我的评价
  </div>
  <div class="evaluateP_info">
    <div class="info_tit">
      <span style="color: #404040;">订单号：</span>
      <span style="color: #9E9E9E;">2768294387409328020</span>
    </div>
    <div class="info_main">
      <div class="left">
        <div class="imgWrap">
          <img src="" alt="">
        </div>
        <div class="description">
          【现货发】正宗福建茂谷柑水果橘子京东生鲜净重 5斤装
          当季新鲜水果胜沃柑皇帝柑 茂谷柑3斤中果
        </div>
        <div class="price">
          <span>¥ 31</span>
          <span>.00</span>
        </div>
        <div class="specification">5斤装×1</div>
      </div>
      <div class="right">
        <div class="right_tit">商品评分</div>
        <div class="evaluate_div">
          <div>
            <span>描述相符：</span>
            <ul class="rating-level" id="stars1">
              <!-- start:value 即设置当前星数的分值 -->
              <li><a class="one-star" star:value="100" href="#">100</a></li>
              <li><a class="two-stars" star:value="200" href="#">200</a></li>
              <li><a class="three-stars" star:value="300" href="#">300</a></li>
              <li><a class="four-stars" star:value="400" href="#">400</a></li>
              <li><a class="five-stars" star:value="500" href="#">500</a></li>
            </ul>
            <span class="result" id="stars1-tips"></span>
            <input type="hidden" id="stars1-input" name="a" value="" size="1" />
          </div>
          <div>
            <span>服务态度：</span>
            <ul class="rating-level" id="stars2">
              <!-- start:value 即设置当前星数的分值 -->
              <li><a class="one-star" star:value="100" href="#">100</a></li>
              <li><a class="two-stars" star:value="200" href="#">200</a></li>
              <li><a class="three-stars" star:value="300" href="#">300</a></li>
              <li><a class="four-stars" star:value="400" href="#">400</a></li>
              <li><a class="five-stars" star:value="500" href="#">500</a></li>
            </ul>
            <span class="result" id="stars2-tips"></span>
            <input type="hidden" id="stars2-input" name="a" value="" size="2" />
          </div>
          <div>
            <span>发货速度：</span>
            <ul class="rating-level" id="stars3">
              <!-- start:value 即设置当前星数的分值 -->
              <li><a class="one-star" star:value="100" href="#">100</a></li>
              <li><a class="two-stars" star:value="200" href="#">200</a></li>
              <li><a class="three-stars" star:value="300" href="#">300</a></li>
              <li><a class="four-stars" star:value="400" href="#">400</a></li>
              <li><a class="five-stars" star:value="500" href="#">500</a></li>
            </ul>
            <span class="result" id="stars3-tips"></span>
            <input type="hidden" id="stars3-input" name="a" value="" size="2" />
          </div>
        </div>
        <form action="">
          <div class="form-check form-check-inline" style="margin-right: 30px;">
            <input class="form-check-input" type="radio" name="evaluate" value="3" id="good">
            <label class="form-check-label">好评</label>
          </div>
          <div class="form-check form-check-inline" style="margin-right: 30px;">
            <input class="form-check-input" type="radio" name="evaluate" value="2" checked id="soso">
            <label class="form-check-label">中评</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="evaluate" value="1" id="bad">
            <label class="form-check-label">差评</label>
          </div>
          <div class="form-group" style="display: flex;margin: 23px 0;">
            <label style="width: 80px;flex-shrink: 0;">问题描述：</label>
            <textarea class="form-control" rows="4" style="resize: none;width: 348px;"></textarea>
          </div>
          <div class="form-group" style="display: flex">
            <label style="width: 80px;flex-shrink: 0;">上传凭证：</label>
            <div class="imgList">
              <div class="imgWrap"><img
                      src="../resources/style/system/front/default/images/default.png" alt=""></div>
              <div class="imgWrap"><img
                      src="../resources/style/system/front/default/images/default.png" alt=""></div>
              <div class="imgWrap"><img
                      src="../resources/style/system/front/default/images/default.png" alt=""></div>
              <div class="chooseFile" >选择文件</div>
              <small id="imgHelp"
                     class="form-text text-muted">最多可上传3张图片，每张图片大小不超过5M,支持bmp,gif,jpg,png,jpeg格式文件</small>
              <input id="upload" name="file" accept="image/*" type="file" style="display: none">
              <script>
                // 上传的方法
                $(function () {
                  $(".chooseFile").click(function () {
                    $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
                    $("#upload").on("change", function () {
                      var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                      console.log(objUrl, '输出图片路径')
                      if (objUrl) {
                        $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
                        upimg();
                      }
                    });
                  });
                });

                //建立一?可存取到?file的url
                function getObjectURL(file) {
                  var url = null;
                  if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                  } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                  } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                  }
                  return url;
                }
                //上传头像到服务器
                function upimg() {
                  console.log(344)
                  var pic = $('#upload')[0].files[0];
                  var file = new FormData();
                  file.append('image', pic);
                  $.ajax({
                    url: "/uploadImg",
                    type: "post",
                    data: file,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                      console.log(data);
                      var res = data;
                      // $("#resimg").append("<img src='/" + res + "'>")
                    }
                  });
                }
              </script>
            </div>
          </div>

          <div class="submit_evaluate">提交</div>
        </form>
      </div>
    </div>
  </div>
</div>


</body>
<script src="/static/member/js/jquery-3.1.1.min.js"></script>
<script src="/static/member/js/index.js"></script>
<script>
  // 提交按钮
  function submit_evaluate(){
    // 输出描述相符、服务态度、发货速度的评星value值
    console.log(document.getElementById("stars1-input").value)
    console.log(document.getElementById("stars2-input").value)
    console.log(document.getElementById("stars3-input").value)
  }
  var Class = {
    create: function () {
      return function () { this.initialize.apply(this, arguments); }
    }
  }
  var Extend = function (destination, source) {
    for (var property in source) {
      destination[property] = source[property];
    }
  }
  function stopDefault(e) {
    if (e && e.preventDefault) {
      e.preventDefault();
    } else {
      window.event.returnValue = false;
    }
    return false;
  }
  /**
   * 星星打分组件
   *
   */
  var Stars = Class.create();
  Stars.prototype = {
    initialize: function (star, options) {
      this.SetOptions(options); //默认属性
      var flag = 999; //定义全局指针
      var isIE = (document.all) ? true : false; //IE?
      var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表
      var input = document.getElementById(this.options.Input) || document.getElementById(star + "-input"); // 输出结果
      var tips = document.getElementById(this.options.Tips) || document.getElementById(star + "-tips"); // 打印提示
      var nowClass = " " + this.options.nowClass; // 定义选中星星样式名
      var tipsTxt = this.options.tipsTxt; // 定义提示文案
      var len = starlist.length; //星星数量


      for (i = 0; i < len; i++) { // 绑定事件 点击 鼠标滑过
        starlist[i].value = i;
        starlist[i].onclick = function (e) {
          stopDefault(e);
          this.className = this.className + nowClass;
          flag = this.value;
          input.value = this.getAttribute("star:value");
          tips.innerHTML = tipsTxt[this.value]
        }
        starlist[i].onmouseover = function () {
          if (flag < 999) {
            var reg = RegExp(nowClass, "g");
            starlist[flag].className = starlist[flag].className.replace(reg, "")
          }
        }
        starlist[i].onmouseout = function () {
          if (flag < 999) {
            starlist[flag].className = starlist[flag].className + nowClass;
          }
        }
      };
      if (isIE) { //FIX IE下样式错误
        var li = document.getElementById(star).getElementsByTagName('li');
        for (var i = 0, len = li.length; i < len; i++) {
          var c = li[i];
          if (c) {
            c.className = c.getElementsByTagName('a')[0].className;
          }
        }
      }
    },
    //设置默认属性
    SetOptions: function (options) {
      this.options = {//默认值
        Input: "",//设置触保存分数的INPUT
        Tips: "",//设置提示文案容器
        nowClass: "current-rating",//选中的样式名
        tipsTxt: ["1分-严重不合格", "2分-不合格", "3分-合格", "4分-优秀", "5分-完美"]//提示文案
      };
      Extend(this.options, options || {});
    }
  }

  /* For TEST */
  function teststars() {
      alert(document.getElementById("stars1-input").value + "|" + document.getElementById("stars2-input").value)
  }

  var Stars1 = new Stars("stars1", { nowClass: "current-rating", tipsTxt: ["100分-严重不合格", "200分-不合格", "300分-合格", "400分-优秀", "500分-完美"] })
  var Stars2 = new Stars("stars2", { nowClass: "current-rating", tipsTxt: ["100分-严重不合格", "200分-不合格", "300分-合格", "400分-优秀", "500分-完美"] })
  var Stars3 = new Stars("stars3", { nowClass: "current-rating", tipsTxt: ["100分-严重不合格", "200分-不合格", "300分-合格", "400分-优秀", "500分-完美"] })

</script>
</html>
